<template>
	<Top/>
	<div style="float: left;margin-right: 20px;margin-left: 20px;">
		<div>
			<div ref="xgvideo"></div>
			<div>
				<el-color-picker v-model="commentColor" />
				<el-input ref="comment" v-model="input" style="width: 450px;margin: 15px;" placeholder="输入弹幕" />
				<el-button type="primary" @click="sendComment">发送弹幕</el-button>
			</div>
		</div>
	</div>
	<div>
		<h1 :innerText="detail.name"></h1>
		<span>简介</span>
		<p :innerText="detail.des"></p>
	</div>
	<el-card class="box-card" style="float: inline-start;">
		<div slot="header" class="clearfix">
			<span class="text">为你推荐</span>
		</div>
		<div v-for="data in recommends" :key="data" class="text item">
			<router-link :to="data.url">
				<el-image calss="item" :src="data.image" fit="fill"></el-image>
				<span style="width: 300px;font-size: 20px;" :innerText="data.title"></span>
			</router-link>
		</div>
	</el-card>
</template>

<script>
	import { ref } from 'vue'
	
	import Top from '@/components/Top.vue';
	// import Player from 'xgplayer'
	import axios from "axios";
	// import 'xgplayer/dist/index.min.css'
	// import '/node_modules/xgplayer-vue/node_modules/xgplayer/browser/index.js'
	import '//unpkg.byted-static.com/xgplayer/2.31.6/browser/index.js';
	
	export default {
		data() {
			return {
				input:"",
				commentColor:"#0044FF",
				player: null,
				detail:{
					"name":"",
					"des":"",
					"image":"",
					"publishTime":"",
					"url":""
				},
				recommends: [
					{
						image: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
						url: "/page/DetailPage/1",
						title: "繁花"
					},
					{
						image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
						url: "https:baidu.com",
						title: "奥本海默"
					},
					{
						image: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
						url: "https:baidu.com",
						title: "三大队"
					},
					{
						image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
						url: "https:baidu.com",
						title: "奥本海默"
					},
					{
						image: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
						url: "https:baidu.com",
						title: "三大队"
					},
					{
						image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
						url: "https:baidu.com",
						title: "奥本海默"
					}
				]
			}
		},
		mounted(){
			let application=this;
			let detail= this.detail;
			let videoEl=this.$refs.xgvideo;
			axios.get('/api/video/user/videoDetail?id='+this.$route.params.id)
			        .then(function(response){
						let dtl=response.data.data;
						detail.name=dtl.name;
						detail.des=dtl.des;
						detail.image=dtl.image;
						detail.publishTime=dtl.publishTime;
						detail.url=dtl.url;
						let player=new Player({
						        el: videoEl,
						        volume: 0.5,
								playbackRate: [0.5, 0.75, 1, 1.5, 2, 4, 8, 16],
								defaultPlaybackRate: 1,
								marginControls: false,
								pip: true,
						        url: dtl.url,
						        poster: dtl.image,
								cssFullscreen: true,
								rotate: {   //视频旋转按钮配置项
									innerRotate: true, //只旋转内部video
									clockwise: false // 旋转方向是否为顺时针
								},
						        danmu: {
									comments: [
											{
												duration: 15000,
												id: '1',
												start: 1000,
												txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
												style: {  //弹幕自定义样式
													color: '#ff9500',
													fontSize: '20px',
													border: 'solid 1px #ff9500',
													borderRadius: '50px',
													padding: '5px 11px',
													backgroundColor: 'rgba(255, 255, 255, 0.1)'
												}
											},
											{
													duration: 15000,
													id: "2",
													start: 3000,
													txt: "长弹幕长弹幕长弹幕",
													style: {  //弹幕自定义样式
														color: '#ff9500',
														fontSize: '20px',
														border: 'solid 1px #ff9500',
														borderRadius: '50px',
														padding: '5px 11px',
														backgroundColor: 'rgba(255, 255, 255, 0.1)'
													}
											},
											{
													duration: 15000,
													id: "3",
													start: 4000,
													txt: "长弹幕长弹幕长弹幕",
													style: {  //弹幕自定义样式
														color: '#ff9500',
														fontSize: '20px',
														border: 'solid 1px #ff9500',
														borderRadius: '50px',
														padding: '5px 11px',
														backgroundColor: 'rgba(255, 255, 255, 0.1)'
													}
											},
											{
													duration: 15000,
													id: "4",
													start: 5000,
													txt: "长弹幕长弹幕长弹幕",
													style: {  //弹幕自定义样式
														color: '#ff9500',
														fontSize: '20px',
														border: 'solid 1px #ff9500',
														borderRadius: '50px',
														padding: '5px 11px',
														backgroundColor: 'rgba(255, 255, 255, 0.1)'
													}
											},
											{
													duration: 15000,
													id: "5",
													start: 8000,
													txt: "长弹幕长弹幕长弹幕",
													style: {  //弹幕自定义样式
														color: '#ff9500',
														fontSize: '20px',
														border: 'solid 1px #ff9500',
														borderRadius: '50px',
														padding: '5px 11px',
														backgroundColor: 'rgba(255, 255, 255, 0.1)'
													}
											}
									],
									area: {
											"start": 0.2,
											"end": 0.8
									},
									closeDefaultBtn: false, //开启此项后不使用默认提供的弹幕开关，默认使用西瓜播放器提供的开关
									defaultOff: false, //开启此项后弹幕不会初始化，默认初始化弹幕
									panel: true,
								},
								playNext: {
								        urlList: [detail.url,detail.url],
								}
						      });
						player.emit('resourceReady', [{ name: '超清', url: detail.url }, { name: '高清', url: detail.url }, { name: '标清', url: detail.url }]);
						player.on('rotate',function(deg) {
						    console.log(deg);// 旋转时会触发rotate事件，角度有四个值90，180，270，0
						});
						application.player=player;
						
					})
			        .catch(function(error) {
						// 请求失败处理
						  console.log(error);
			        });
		},
		methods:{
			sendComment(){
				let application=this;
				application.player.once('timeupdate',(event)=>{
					application.player.danmu.sendComment({  //发送弹幕
					    duration: 15000,
					    id: event.currentTime+"",
					    start: event.currentTime*1000,
					    txt: application.input,
					    style: {  //弹幕自定义样式
					    	color: application.commentColor,
					    	fontSize: '20px',
					    	border: 'solid 1px '+application.commentColor,
					    	borderRadius: '50px',
					    	padding: '5px 11px',
					    	backgroundColor: 'rgba(255, 255, 255, 0.1)'
					    }
					})
				})
			}
		}
	}
</script>
<style>

</style>